<script setup lang="ts">
import { ref } from 'vue'
import type { HomeBanner } from '@/types/home'

const activeIndex = ref(0)
const onChange: UniHelper.SwiperOnChange = (e) => {
  // 最新的uniHelper更新了Swiper标签的声明类型，它把unudefind去掉了，所以e.detail一定不为空
  activeIndex.value = e.detail.current
}

defineProps<{ list: HomeBanner[] }>()
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <!-- #ifdef MP-WEIXIN -->
          <image class="image" :src="item.imgUrl" lazy-load></image>
          <!-- #endif -->
          <!-- #ifdef H5 || APP-PLUS -->
          <img :src="item.imgUrl" class="image" alt="" loading="lazy" />
          <!-- #endif -->
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
@import './style/XtxSwiper';
</style>
